<template>
    <div class="wrap">
        <div class="card" v-if="authStatus != 0">
            <div class="status">
                <van-icon :name="statusKey[authStatus].name" :class="statusKey[authStatus].class"></van-icon>
                <span>{{statusKey[authStatus].text}}</span>
            </div>
            <div class="status-desc">
                {{statusKey[authStatus].tips}}{{shopInfo.rejectMsg}}
            </div>
        </div>
        <ul class="list">
            <li>
                <img class="idcard" src="http://img.douluotianxia.com/img/idcard-front.png">
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li>
                <div class="idcard upload-wrap" @click="handleUpload('idcardFrontImg')">
                    <div class="box top-left"></div>
                    <div class="box top-right"></div>
                    <div class="box bottom-left"></div>
                    <div class="box bottom-right"></div>
                    <div class="upload-wrap">
                        <img class="upload-btn" :src="iconInfo.uploadIcon" v-if="!readStatus"/>
                        <img v-if="idcardFrontImg" class="card-img" :src="idcardFrontImg"/>
                    </div>
                </div>
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li>
                <img class="idcard" src="http://img.douluotianxia.com/img/idcard-back.png">
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li>
                <div class="idcard upload-wrap" @click="handleUpload('idcardBackImg')">
                    <div class="box top-left"></div>
                    <div class="box top-right"></div>
                    <div class="box bottom-left"></div>
                    <div class="box bottom-right"></div>
                    <div class="upload-wrap">
                        <img v-if="!readStatus" class="upload-btn" :src="iconInfo.uploadIcon"/>
                        <img v-if="idcardBackImg" class="card-img" :src="idcardBackImg"/>
                    </div>
                </div>
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li v-if="authType === 1">
                <img class="idcard" src="http://img.douluotianxia.com/img/idcard-peple.png">
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li v-if="authType === 1">
                <div class="idcard upload-wrap" @click="handleUpload('holdIdcardImg')">
                    <div class="box top-left"></div>
                    <div class="box top-right"></div>
                    <div class="box bottom-left"></div>
                    <div class="box bottom-right"></div>
                    <div class="upload-wrap">
                        <img v-if="!readStatus" class="upload-btn" :src="iconInfo.uploadIcon" />
                        <img v-if="holdIdcardImg" class="card-img" :src="holdIdcardImg"/>
                    </div>
                </div>
                <div class="tips">正确示例：文字清晰可见</div>
            </li>
            <li class="max-item" v-if="authType === 2">
                <img :src="businessLicenseImg || 'http://img.douluotianxia.com/img/license.jpg'" class="license-img"/>
                <div class="upload-wrap upload-wrap--max" @click="handleUpload('businessLicenseImg')" v-if="!readStatus">
                    <img class="upload-btn" :src="iconInfo.uploadIcon" />
                </div>
            </li>
        </ul>
        <van-cell-group v-if="authType === 1">
            <van-field
                :value="baseInfo.memberName"
                @change="changePeple($event, 'memberName')"
                clearable
                :readonly="readStatus"
                label="真实姓名"
                placeholder="请输入真实姓名"
            />
            <van-field
                :value="baseInfo.idcardNo"
                @change="changePeple($event, 'idcardNo')"
                clearable
                :readonly="readStatus"
                label="身份证号"
                type="idcard"
                placeholder="请输入身份证号"
            />
            <div class="select-icon select-icon--bottom" @click="showSelect">
                <van-field
                    :value="baseInfo.identity ? baseInfo.identity : '点击选择'"
                    label="身份"
                    readonly
                />
            </div>
            <van-field
                :value="baseInfo.schoolName"
                @change="changePeple($event, 'schoolName')"
                clearable
                :readonly="readStatus"
                label="学校名称"
                placeholder="请输入学校名称"
            />
        </van-cell-group>
        <van-cell-group v-else>
            <van-field
                :value="shopInfo.businessName"
                @change="changeShop($event, 'businessName')"
                clearable
                :readonly="readStatus"
                label="商家名称"
                placeholder="请输入商家名称"
            />
            <van-field
                :value="shopInfo.businessLicenseNo"
                @change="changeShop($event, 'businessLicenseNo')"
                clearable
                :readonly="readStatus"
                label="营业执照编号"
                placeholder="请输入营业执照编号"
            />       
            <van-field
                :value="shopInfo.memberName"
                @change="changeShop($event, 'memberName')"
                clearable
                :readonly="readStatus"
                label="法人姓名"
                placeholder="请输入法人姓名"
            />
            <van-field
                :value="shopInfo.idcardNo"
                @change="changeShop($event, 'idcardNo')"
                clearable
                :readonly="readStatus"
                type="idcard"
                label="法人身份证号"
                placeholder="请输入法人身份证号"
            />
            <van-field
                :value="shopInfo.linkTel"
                @change="changeShop($event, 'linkTel')"
                clearable
                :readonly="readStatus"
                type="number"
                label="联系电话"
                placeholder="请输入联系电话"
            />
            
        </van-cell-group>
        <div class="tips-text" v-if="authType === 2 && !readStatus">完成商家认证才能发布兼职信息</div>
        <div class="sumit-btn" @click="submit" v-if="!readStatus">提交认证</div>
        <van-action-sheet :show="visibleSelect" @close="visibleSelect = false">
            <van-picker value-key="name" :columns="selectOption" @cancel="showSelect" @confirm="changeSelect" :show-toolbar="true" title="选择身份"/>
        </van-action-sheet>
    </div>
</template>
<script>
const uploadIcon = require('@static/images/upload.png');
export default {
    data () {
        return {
            authType: 2,
            iconInfo: {
                uploadIcon
            },
            shopInfo: {
                businessName: '',
                businessLicenseNo: '',
                memberName: '',
                idcardNo: '',
                linkTel: ''
            },
            baseInfo: {
                memberName: '',
                idcardNo: '',
                identity: '',
                schoolName: '',
                identityId: null
            },
            idcardFrontImg: '',
            idcardBackImg: '',
            businessLicenseImg: '',
            holdIdcardImg: '',
            visibleSelect: false,
            authStatus: 0,
            readStatus: false,
            selectOption: [
                {
                    value: 1,
                    name: '在校学生'
                },
                {
                    value: 2,
                    name: '社会人士'
                },
                {
                    value: 3,
                    name: '商家'
                },
            ],
            selectType: 'identity',
            statusKey: {
                1: {
                    name: 'info',
                    class: 'status-icon',
                    text: '审核中',
                    tips: ''
                },
                2: {
                    name: 'checked',
                    class: 'status-icon',
                    text: '认证成功',
                    tips: ''
                },
                3: {
                    name: 'clear',
                    class: 'status-icon status-error',
                    text: '认证失败',
                    tips: '拒绝理由：'
                }
            }
        };
    },
    methods: {
        handleUpload(type) {
            if (this.readStatus) return;
            const self = this;
            wx.showLoading({
                title: '加载中',
            });
            wx.chooseImage({
                count: 1,
                success(res) {
                    let path = res.tempFilePaths[0];
                    let FSM = wx.getFileSystemManager();
                    let base64Str = FSM.readFileSync(path, "base64");
                    let imgType = res.tempFilePaths[0].substring(
                        res.tempFilePaths[0].lastIndexOf(".")
                    );
                    self.$api.uploadImg({ base64Str, imgType }).then(({data}) => {
                        self[type] = data.imgUrl;
                    });
                },
                complete() {
                    wx.hideLoading();
                }
            });
        },
        submit() {
            const format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
            //号码规则校验
            if(!this.idcardFrontImg){
                wx.showToast({
                    title: '身份证正面不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.idcardBackImg){
                wx.showToast({
                    title: '身份证反面不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if (this.authType === 2) {
                if(!format.test(this.shopInfo.idcardNo)){
                    wx.showToast({
                        title: '身份证号码不正确',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!(/^1[3456789]\d{9}$/.test(this.shopInfo.linkTel))){
                    wx.showToast({
                        title: '电话号码格式不正确',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.businessLicenseImg){
                    wx.showToast({
                        title: '商家证件不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.shopInfo.businessName.trim()){
                    wx.showToast({
                        title: '商家名称不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.shopInfo.businessLicenseNo.trim()){
                    wx.showToast({
                        title: '营业执照编号不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.shopInfo.memberName.trim()){
                    wx.showToast({
                        title: '法人名称不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                this.$api.realBusiness({
                    idcardFrontImg: this.idcardFrontImg,
                    idcardBackImg: this.idcardBackImg,
                    businessLicenseImg: this.businessLicenseImg,
                    businessName: this.shopInfo.businessName,
                    businessLicenseNo: this.shopInfo.businessLicenseNo,
                    memberName: this.shopInfo.memberName,
                    idcardNo: this.shopInfo.idcardNo,
                    linkTel: this.shopInfo.linkTel
                }).then(res => {
                    wx.navigateBack({
                        delta: 1
                    });
                });
            } else {
                if(!format.test(this.baseInfo.idcardNo)){
                    wx.showToast({
                        title: '身份证号码不合规',
                        icon: 'none',
                        duration: 1500,
                        mask: false,
                    });
                    return;
                }
                if(!this.holdIdcardImg){
                    wx.showToast({
                        title: '手持身份照不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.baseInfo.memberName.trim()){
                    wx.showToast({
                        title: '真实名称不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.baseInfo.identityId){
                    wx.showToast({
                        title: '请选择身份',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                if(!this.baseInfo.schoolName){
                    wx.showToast({
                        title: '学校名称不能为空',
                        icon: 'none',
                        duration: 2000,
                        mask: false,
                    });
                    return;
                }
                this.$api.realName({
                    idcardFrontImg: this.idcardFrontImg,
                    idcardBackImg: this.idcardBackImg,
                    holdIdcardImg: this.holdIdcardImg,
                    memberName: this.baseInfo.memberName,
                    idcardNo: this.baseInfo.idcardNo,
                    identity: this.baseInfo.identityId,
                    schoolName: this.baseInfo.schoolName,
                }).then(res => {
                    wx.navigateBack({
                        delta: 1
                    });
                });
            }
        },
        changeShop(e,type){
            this.shopInfo[type] = e.mp.detail;
        },
        changePeple(e,type){
            this.baseInfo[type] = e.mp.detail;
        },
        showSelect() {
            this.visibleSelect = !this.visibleSelect;
        },
        changeSelect(e) {
            const value = e.target.value;
            this.baseInfo.identity = value.name;
            this.baseInfo.identityId = value.value;
            this.showSelect();
        },
        getInfo() {
            this.$api.selectMemberAuth().then(res => {
                if (res.code == 0) {
                    this.idcardFrontImg = res.data.idcardFrontImg,
                    this.idcardBackImg = res.data.idcardBackImg,
                    this.holdIdcardImg = res.data.holdIdcardImg,
                    this.businessLicenseImg = res.data.businessLicenseImg,
                    this.authStatus = res.data.authStatus;
                    this.shopInfo = res.data;
                    this.readStatus = res.data.authStatus != 0 &&  res.data.authStatus != 3;
                }
            })
        }
    },
    onLoad() {
        Object.assign(this.$data, this.$options.data());
        const parmas = this.$getQuery();
        if (parmas.type == 1) {
            wx.setNavigationBarTitle({
                title: "实名认证"
            });
            this.authType = 1;
            this.authStatus = 0;
            this.readStatus = false;
            this.idcardFrontImg = '',
            this.idcardBackImg = ''
        } else {
            this.authType = 2;
            this.getInfo();
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    padding: 15px;
    background: $grey-bg;
}
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
    li {
        width: 169px;
        height: 122px;
        background: $theme-color;
        border-radius: 4px;
        margin-bottom: 10px;
        text-align: center;
    }
    .max-item {
        width: 345px;
        height: 264px;
        position: relative;
    }
}
.license-img {
    width: 315px;
    height: 232px;
    margin: 15px 0px;
}
.idcard {
    width: 111px;
    height: 66px;
    margin: 19px 0px 14px;
    border-radius: 10px;
}
.tips {
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 13px;
}
.upload-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin: 19px auto 14px;
    position: relative;
}
.upload-wrap--max {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid transparent;
}
.top-left {
    border-left-color: #fff;
    border-top-color: #fff;
    left: -10px;
    top: -10px;
}
.top-right {
    border-right-color: #fff;
    border-top-color: #fff;
    right: -10px;
    top: -10px;
}
.bottom-right {
    border-bottom-color: #fff;
    border-right-color: #fff;
    right: -10px;
    bottom: -10px;
}
.bottom-left {
    border-bottom-color: #fff;
    border-left-color: #fff;
    left: -10px;
    bottom: -10px;
}
.upload-btn {
    width: 40px;
    height: 32px;
}

.sumit-btn {
    width: 345px;
    height: 45px;
    border-radius: 4px;
    background: $theme-color;
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
    margin: 30px auto;
}
.tips-text {
    color: $grey-color;
    font-size: 12px;
    text-align: left;
    margin-top: 10px;
}
.card-img {
    width: 111px;
    height: 71px;
    position: absolute;
}
.card {
    padding: 15px;
    background:#fff;
    border-radius: 4px;
    margin-bottom: 10px;
}
.status {
    display:flex;
    align-items: center;
}
.status-icon {
    font-size: 30px;
    color: #3bb8fd;
    margin-right: 10px;
}
.status-desc {
    line-height: 22px;
    color: #888;
}
.status-error{
    color: red;
}
</style>
